<template>
    <div>
        <Card>
            <Row>
                <Col>
                    <Menu :theme="theme2" @on-select="changeActiveName" :active-name="menuActiveName" :open-names="menuOpenName" accordion>
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-paper" />
                                内容管理
                            </template>
                            <MenuItem name="1-1">文章管理</MenuItem>
                            <MenuItem name="1-2">评论管理</MenuItem>
                            <MenuItem name="1-3">举报管理</MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template slot="title">
                                <Icon type="ios-people" />
                                用户管理
                            </template>
                            <MenuItem name="2-1">新增用户</MenuItem>
                            <MenuItem name="2-2">活跃用户</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-stats" />
                                统计分析
                            </template>
                            <MenuGroup title="使用">
                                <MenuItem name="3-1">新增和启动</MenuItem>
                                <MenuItem name="3-2">活跃分析</MenuItem>
                                <MenuItem name="3-3">时段分析</MenuItem>
                            </MenuGroup>
                            <MenuGroup title="留存">
                                <MenuItem name="3-4">用户留存</MenuItem>
                                <MenuItem name="3-5">流失用户</MenuItem>
                            </MenuGroup>
                        </Submenu>
                    </Menu>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';
// import store from '../../../store'
import xwTools from '../../../libs/xwTool';
export default {
    name: 'menu',
    data () {
        return {
            theme2: 'light'
            // menuActiveName: '1-2',
            // menuOpenName: ['1']
        };
    },
    computed: {
        menuActiveName () {
            return this.$store.state.menuActiveName;
        },
        menuOpenName () {
            return this.$store.state.menuOpenName;
        }
    },
    methods: {
        ...mapMutations([
            'UPDATE_MENU_ACTIVENAME'
        ]),
        changeActiveName (val) {
            this.UPDATE_MENU_ACTIVENAME(val);
            xwTools.saveMenu(val);
            // this.$store.commit('UPDATE_MENU_ACTIVENAME', val);
        }
    }
};
</script>

<style scoped>

</style>
